<template>
  <div class="nav">
    <a-menu mode="inline" :openKeys="[props.opennav]" :selectedKeys="[props.nav]">
      <a-sub-menu
        v-for="item in menuNav"
        :key="`${item.url}${item.name}`"
        @titleClick="(e:Event) => titleClick(e, `${item.url}${item.name}`)"
      >
        <template #title>
          <span>
            {{ item.name }}
          </span>
        </template>
        <a-menu-item
          v-for="el in item.children"
          :key="`${el.url}${el.name}`"
          @click="() => menunav(`${el.url}${el.name}`)"
          >{{ el.name }}</a-menu-item
        >
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<style lang="less">
.nav {
  height: calc(100vh - 51px);
  overflow: auto;
}
</style>
<script lang="ts" setup>
import menuNav from './nav'

const props = defineProps({
  nav: {
    type: String,
    require: true,
    default: '一、硬件连接方法'
  },
  opennav: {
    type: String,
    require: true,
    default: '1直播管家安装说明'
  }
})
const emit = defineEmits<{ (e: 'click1', key: string): void; (e: 'click2', key: string): void }>()
const titleClick = (e: Event, key: string) => {
  emit('click2', key)
}
const menunav = (key: string) => {
  emit('click1', key)
}
</script>
